<template>
	<view class="custom-nav" :class="{ fixed: isFixed }">
		<view class="icon-box" v-if="iconFlag">
			<u-icon name="arrow-left" color="#000"
				size="18" @click="toParent"></u-icon>
		</view>
		
		<text class="nav-title">{{ navTitle }}</text>
	</view>
</template>

<script setup lang="ts">
	import { defineProps } from 'vue';
	import { jumpToParent } from '@/utils/jump.js'

	const props = defineProps({
		iconFlag: Boolean,
		navTitle: String,
		isFixed: Boolean
	});
	
	// 返回上一层
	const toParent = () => {
		jumpToParent()
	}
</script>

<style lang="scss" scoped>
	.custom-nav {
		width: 100%;
		height: 120rpx;
		text-align: center;
		background-color: #f5f5f5;
		transition: top 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 24rpx;
		box-sizing: border-box;
		
		.icon-box {
			position: absolute;
			left: 24rpx; 
			top: 50%;
			transform: translateY(-50%);
		}

		.nav-title {
			text-align: center;
			font-weight: 700;
			font-size: 36rpx;
			height: 110rpx;
			line-height: 110rpx;
			padding-bottom: 22rpx;
			box-sizing: border-box;
		}
	}

	.custom-nav.fixed {
		position: fixed;
		top: 0;
		z-index: 999;
	}
</style>